
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
     
      <hr/>

      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-4 am-u-md-push-8">
          

        </div>

        <div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4">
          <form action="{:Url('admin/addshop/tianjia')}" class="am-form am-form-horizontal" enctype="multipart/form-data"	method="post">
              <div class="am-form-group">
                <label for="user-name" class="am-u-sm-3 am-form-label">商品类型 </label>
                <div class="am-u-sm-9">
                  <select  id="fenlei" style="width:200px;" onchange="first(this)">
                    <option>请选择</option>
                    {volist name="ret" id="vo"}
                    <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                  </select>
                </div>
              </div>

              
              <div class="am-form-group" >
                <label for="user-name" class="am-u-sm-3 am-form-label">商品规格 </label>
              </div>
              <span id="format"></span>
              <table class="am-table am-table-striped am-table-hover table-main">
                <thead>
                  <tr id='format-tr'>

                  </tr>
                </thead>

              </table>
              
          </form>
        </div>
        
      </div>
    </div>

    <footer class="admin-content-footer">
      <hr>
      <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </footer>

  </div>
  <script>
      function first(obj){
          // alert ($(obj).val());
          $.ajax({
              url:"{:Url('admin/commoditylist/index')}",
              data:{fenlei:$(obj).val()},
              dataType:'json',
              type:'post',
              success:function(ret){
                console.log(ret);
                  var html='';
                  for(var i=0; i<ret.length ;i++){
                    html +="<div class='m-form-group'>";
                    html +="<label  class='am-u-sm-3 am-form-label' id='format-n'>";
                    html +=ret[i].name+"</label><br>";
                    html +="<div class='am-u-sm-9' >";
                    for(var k=0;k<ret[i]['vals'].length;k++){
                      
                      html+="<input type='button' value="+ret[i]['vals'][k]+" onclick='butt(this)' class='but' style='margin-top:-40px'>"
                     
                    }
                    html+="</div><br>";
                    html+="</div>";
                  }
                  $('#format').html(html);

              }
             
          })

      }

      function butt(obj){
        var format_n=$(obj).parent().siblings('label').text();
        var format_v=$(obj).val();
        $(obj).toggleClass('but_color')

        var formatData=[];
        $(obj).parents('#format-tr').each(function(){
          var formatVals=[];
          var data=[];
          data.name=format_n;

          $(obj).parent().find('.but_color').each(function(){
            var vals=$(this).val();
            formatVals.push(vals);

          })
          data.formatVals=formatVals;
          formatData.push(data);
        })
        console.log(formatData);
      }   
  </script>
  <!-- content end -->
  
 